<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.workstation" placeholder="请选择车间" clearable style="width: 200px" class="filter-item">
        <el-option v-for="item in selectOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-date-picker
        v-model="listQuery.datetime"
        type="date"
        placeholder="请输入时间" class="filter-item">
      </el-date-picker>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button v-waves class="filter-item" type="info" icon="el-icon-refresh" @click="handleReset">
        重置
      </el-button>
    </div>
    <el-row>
      <div ref="chart" class="chart" :style="chartStyle" />
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts'
import resize from '../mixins/resize'
import { fetchDayList } from '@/api/bdc/output-chart'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
const selectOptions = [
  { key: 'HZ11_20', label: '焊装车间' },
  { key: 'TZ11_20', label: '涂装车间' },
  { key: 'ZZ11_30', label: '总装车间' }
]
export default {
  name: 'DailyOutputChart',
  directives: { waves },
  mixins: [resize],
  data() {
    return {
      // 查询模块
      listQuery: {
        workstation: undefined,
        datetime: null
      },
      selectOptions: selectOptions,
      // echarts
      chart: null,
      chartStyle: {height: '500px', width: '100%'},
      chartData: null
    }
  },
  mounted() {
    // 初始化echarts容器
    this.$nextTick(() => {
      this.chart = echarts.init(this.$refs.chart)
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    // 查询
    handleFilter() {
      // 验证
      if (!this.listQuery.workstation) {
        this.$message.warning('请选择车间！')
        return
      }
      if (!this.listQuery.datetime) {
        this.$message.warning('请输入日期！')
        return
      }
      const data = {
        codeValue: this.listQuery.workstation,
        beginDate: parseTime(this.listQuery.datetime, '{y}-{m}-{d}')
      }
      console.log('data', data)
      fetchDayList(data).then(res => {
        if (res.code == 200) {
          this.initChart()
          for (const i of this.chartData.xAxisData) {
            if (res.data.find(a => a.NEWHOUR === i)) {
              this.chartData.series.push(res.data.find(a => a.NEWHOUR === i).TOTAL)
            } else {
              this.chartData.series.push(0)
            }
          }
          this.setOptions(this.chartData)
        } else {
          this.$message.error('服务器内部错误！');
        }
      })
      
    },
    initChart() {
      // 初始化echarts数据
      this.chartData = {
        xAxisData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
        series:[]
      }
    },
    // 重置
    handleReset() {
      this.listQuery = {
        workstation: undefined,
        datetime: null
      }
    },
    setOptions({ xAxisData, series } = {}) {
      this.chart.setOption({
        // 配置x轴点位显示居中还是居左
        xAxis: {
          data: xAxisData,
          boundaryGap: true,
          axisTick: {
            show: true
          },
          axisLabel: {
            formatter: '{value}时'
          }
        },
        // 控制坐标轴位置
        // grid: {
        //   left: 10,
        //   right: 10,
        //   bottom: 20,
        //   top: 30,
        //   containLabel: true
        // },
        // 控制点hover显示
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        // 控制分项线条显示，对应series.name
        // legend: {
        //   data: ['expected', 'actual']
        // },
        series: [{
          name: '产量', 
          itemStyle: {
            normal: {
              color: '#000',
              lineStyle: {
                color: '#000',
                width: 2
              },
              // 显示点值
              label: {
                show: true,
                // position: 'top'
              }
            }
          },
          // smooth: true,
          type: 'line',
          data: series,
          animationDuration: 2800,
          animationEasing: 'cubicInOut',
          // 显示辅助线
          markLine:{
            /*以下设置一行后，平均线就没有开始和结束标记了（即看不见箭头了）*/
            symbol:"none",
            data: [
              {
                name: 'Y 轴值为 200 的水平线',
                yAxis: 200,
                lineStyle:{
                  normal:{
                    color:"red",
                    width:2,
                    type:"solid"
                  }
                }
              }
            ]
          },
        }]
      })
    }
  }
}
</script>